<template>
  <VueDraggable
    class="flex flex-col gap-2 m-auto bg-gray-500/5 rounded overflow-auto"
    v-model="layoutCompList"
    :animation="150"
    ghostClass="ghost"
    :group="{ name: 'people', pull: 'clone', put: false }"
    :sort="false"
    :clone="clone"
  >
    <div
      v-for="item in layoutCompList"
      :key="item.flag"
      class="cursor-move h-30 bg-gray-500/5 rounded p-3"
    >
      <div>{{ item.text }}</div>
    </div>
  </VueDraggable>
</template>

<script setup lang="ts">
import { useDesignerStore } from '@/stores/designerStore'
import { buildCompInstanceId } from '@/utils/DesignCompUtil'
import { VueDraggable } from 'vue-draggable-plus'

const designerStore = useDesignerStore()
const { updateCompInfoToShow, recordCurrentAddCompInstanceId } = designerStore
const layoutCompList = ref<DesignComp[]>([
  {
    text: '一个div',
    type: 'layout',
    flag: 'OneDivLayoutComp',
    id: 'OneDivLayoutComp',
    configData: {},
    children: []
  },
  {
    text: '一组2个div',
    type: 'layout',
    flag: 'OneGroupTwoDivLayoutComp',
    id: 'OneGroupTwoDivLayoutComp',
    configData: {},
    children: []
  },
  {
    text: '一组3个div',
    type: 'layout',
    flag: 'OneGroupThreeDivLayoutComp',
    id: 'OneGroupThreeDivLayoutComp',
    configData: {},
    children: []
  },
  {
    text: '一组4个div',
    type: 'layout',
    flag: 'OneGroupFourDivLayoutComp',
    id: 'OneGroupThreeDivLayoutComp',
    configData: {},
    children: []
  }
])
function buildOneDivLayoutCompConfig(count: number) {
  const children: DesignComp[] = []
  const flag = 'OneDivLayoutComp'
  for (let i = 0; i < count; i++) {
    const id = buildCompInstanceId(flag)
    children.push({
      text: '一个div',
      type: 'layout',
      flag: flag,
      id: id,
      configData: {},
      children: []
    })
  }
  return children
}
function clone(element: DesignComp) {
  const children = []
  if (element.flag === 'OneGroupTwoDivLayoutComp') {
    const tmpChildren = buildOneDivLayoutCompConfig(2)
    children.push(...tmpChildren)
  } else if (element.flag === 'OneGroupThreeDivLayoutComp') {
    const tmpChildren = buildOneDivLayoutCompConfig(3)
    children.push(...tmpChildren)
  } else if (element.flag === 'OneGroupFourDivLayoutComp') {
    const tmpChildren = buildOneDivLayoutCompConfig(4)
    children.push(...tmpChildren)
  }
  const compInstanceId = buildCompInstanceId(element.flag)
  const designCompInfo: DesignComp = {
    ...buildOneDivLayoutCompConfig(1)[0],
    children: children,
    showToolBtn: true
  }
  updateCompInfoToShow(designCompInfo)
  window.requestAnimationFrame(() => {
    nextTick(() => {
      recordCurrentAddCompInstanceId(compInstanceId)
    })
  })
  return designCompInfo
}
</script>

<style scoped></style>
